/* 声明字体格式 @font-face为CSS3中定义的字体规则，或者说是自定义字体的一个模块 
@font-face {
  font-family: 'defineName';
  src: url('../fonts/singlemalta-webfont.eot');
  src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/singlemalta-webfont.woff') format('woff'),
       url('../fonts/singlemalta-webfont.ttf') format('truetype'),
       url('../fonts/singlemalta-webfont.svg#defineName') format('svg');
  font-weight: normal;
  font-style: normal;
  format('truetype'):ttf字体格式
}
*/
@font-face {
    font-family: 'Nunito-Bold';
    src:url(../fonts/Nunito-Bold.ttf) format('truetype');
}
@font-face {
    font-family: 'OpenSans-Regular';
    src:url(../fonts/OpenSans-Regular.ttf) format('truetype');
}
/* 为什么CSS一开始要设置margin和padding为0px
1. 默认块元素自带margin和padding
2. body默认自带8px的margin,这样设定后可以清除body的margin
3. 清除默认padding和margin后我们自定义的CSS样式才不会有偏差
4. 设置margin为0也是为了居中对齐
5. 不同的浏览器对页面元素的初始定义不同，导致页面显示有额外差距
*/
h1,h2,h3,h4,h5,h6{
	padding:0 0;
	margin:0 0;
}
p{
	padding:0 0;
	margin:0 0;
}
ul{
	padding:0 0;
	margin:0 0;	
}
body{
	padding:0 0;
	margin:0 0; 
	font-family: 'OpenSans-Regular';
}
textarea{
    font-family: "微软雅黑";
}
/* -------------header部分设置--------------
1. 不要设置地非常散乱
2. 按照元素从上到下出现的顺序
*/
/* 
为什么要设置min-height?
- 最小高度的定义：1.元素拥有默认高度 2. 当内容超出元素的默认高度时，元素的告诉随内容增加而增加
*/
header{
    min-height: 500px;
    background-color: #deecdf;
}
/* div设置为居中属性后，其中的元素和文本会居中 */
header div{
    text-align: center;
}
/* em和px的区别
px : 像素值
em : 相对值 1em=14-16px

设置图片为圆形：
border-radius : width的一半
*/
header img{
    border-radius:100px;
    height: 200px;
    width:200px;
    margin-top: 7em;
}
header h1{
    font-family: 'Nunito-Bold';
    font-size: 4em;
    text-transform: capitalize;
    color: #393b3a;
    padding: 10px 0 0 0;
}

header span{
    color: #00cfbd;
    font-size: 1em;
}
header p{
    font-family: 'Nunito-Bold';
    font-size: 1.3em;
    color: #393b3a;
}

/* --------------section intro部分的设置--------------- */
/* 
-必须要给div设置宽和高吗？
-div是块级元素，默认的宽是100%，百分比是相对于父类元素的大小。也就是外层元素多宽，div就有多宽。
div的高默认为内部元素的高，但当内部元素是浮动元素时，div的高为0，此时需要清除浮动。
*/
/* .intro .container{
    height: 306px;
    padding: 56px 0;
} */

/* a,b: 分组选择器 a b:后代选择器 */
.intro{
    padding: 56px 0;
}
.container{
    padding: 0 15px;
}
.small_container{
    margin-left: 410.5px;
    width: 1140px;
    height: 306px;
}
.left{
    float:left;
    width: 540px;
    height: 300.813px;
    padding: 0 15px;

}
.right{
    float:left;
    width: 540px;
    height: 300.813px;
    padding: 0 15px;
}
section h1{
    font-family: 'Nunito-Bold';
    font-size: 2em;
    text-transform: capitalize;
    color: #393b3a;
    padding: 10px 0 0 0;    
}
section span{
    color: #00cfbd;
    font-size: 1em;    
}
.left-bottom{
    padding: 14px 0;
    font-size: 1em;
}
.left-bottom p{
    padding:18.480px 0 0 0;
    color: #393b3a;
}
.left-bottom label{
    font-size: 1em;
    color: #9CA69D;
    margin: 0 0 0 7px;
}
/* 进度条的实现详解：
<span class="bar-unfill">
  <span class="bar-fill"></span>
</span>
html: 两个span相互嵌套，底层span为如果页面背景不为纯白色时使用，本网页中此部分背景为纯白色，即可省略
css: bar-fill span的一个简单动画效果：
1. 定义span高度
2. 块级展示
3. 背景颜色
4. 一开始的宽度为0
5. 进度条一般有一个border-radius
6. 
*/
/* .bar-unfill {
    height:15px;
    display:block;
    background:#fff;
    width:100%;
    border-radius:8px
    很奇怪的是，这里为什么要用transition,一个anination就可以解决问题了呀
    animation:自定义动画名称 时间 infinate（无限循环动画）
} */
/* 关于linear-gradient的参数:
linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%, rgba(255,255,255,.2) 75%,transparent 75%,transparent);
-45deg ：渐变的角度
rgba : 全透明彩色，参考CSS3中transparent的定义：
    r red ; g green ; b blue ; A alpha 透明值：取值范围0-1
*/
.bar-fill-1 {
    height:22px;
    display:block;
    text-align: center;
    color: white;
    background:#45c9a5;
    background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%, rgba(255,255,255,.2) 75%,transparent 75%,transparent);
    width:0;
    border-radius:8px;
    /* -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease; */
    -webkit-animation:progressbar1 7s infinite;
    animation:progressbar1 7s infinite
    
}
/* @keyframes 为自定义动画 */
/* Chrome, Safari, Opera */
@-webkit-keyframes progressbar1 { 
    from {
        width:0
    }
    to {
        width:40%
    }
}
/* Standard syntax */
@keyframes progressbar1 {
    from {
        width:0
    }
    to {
        width:40%
    }
}
.bar-fill-2 {
    height:22px;
    display:block;
    text-align: center;
    color: white;
    background: #eba4a4;;
    background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%, rgba(255,255,255,.2) 75%,transparent 75%,transparent);
    width:0;
    border-radius:8px;
    /* -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease; */
    -webkit-animation:progressbar2 7s infinite;
    animation:progressbar2 7s infinite
    
}
/* @keyframes 为自定义动画 */
/* Chrome, Safari, Opera */
@-webkit-keyframes progressbar2 { 
    from {
        width:0
    }
    to {
        width:75%
    }
}
/* Standard syntax */
@keyframes progressbar2 {
    from {
        width:0
    }
    to {
        width:75%
    }
}
.bar-fill-3 {
    height:22px;
    display:block;
    text-align: center;
    color: white;
    background:#a4cedd;
    background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%, rgba(255,255,255,.2) 75%,transparent 75%,transparent);
    width:0;
    border-radius:8px;
    /* -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease; */
    -webkit-animation:progressbar3 7s infinite;
    animation:progressbar3 7s infinite
    
}
/* @keyframes 为自定义动画 */
/* Chrome, Safari, Opera */
@-webkit-keyframes progressbar3 { 
    from {
        width:0
    }
    to {
        width:70%
    }
}
/* Standard syntax */
@keyframes progressbar3 {
    from {
        width:0
    }
    to {
        width:70%
    }
}
.bar-fill-4 {
    height:22px;
    display:block;
    text-align: center;
    color: white;
    background:#c1e485;
    background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%, rgba(255,255,255,.2) 75%,transparent 75%,transparent);
    width:0;
    border-radius:8px;
    /* -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease; */
    -webkit-animation:progressbar4 7s infinite;
    animation:progressbar4 7s infinite
    
}
/* @keyframes 为自定义动画 */
/* Chrome, Safari, Opera */
@-webkit-keyframes progressbar4 { 
    from {
        width:0
    }
    to {
        width:50%
    }
}
/* Standard syntax */
@keyframes progressbar4 {
    from {
        width:0
    }
    to {
        width:50%
    }
}
.bar-fill-5 {
    height:22px;
    display:block;
    text-align: center;
    color: white;
    background:#ca8bdb;
    background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%, rgba(255,255,255,.2) 75%,transparent 75%,transparent);
    width:0;
    border-radius:8px;
    /* -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease; */
    -webkit-animation:progressbar5 7s infinite;
    animation:progressbar5 7s infinite
    
}
/* @keyframes 为自定义动画 */
/* Chrome, Safari, Opera */
@-webkit-keyframes progressbar5 { 
    from {
        width:0
    }
    to {
        width:20%
    }
}
/* Standard syntax */
@keyframes progressbar5 {
    from {
        width:0
    }
    to {
        width:20%
    }
}

.right-bottom{
    padding: 28px 0;
}
/* font-weight:定义字体的粗细 */
.right h4{
    color: #393b3a;
    font-size: 1.2em;
    color: rgb(29, 26, 26);
    font-weight: 500;
}

/* --------------section contact部分的配置 */
.contact{
    height: 377px;
    background-color: #deecdf;
    padding: 56px 0; 
}
.contact h3{
    margin-bottom: 70px;
    font-family: 'Nunito-Bold';
    font-size: 2.5em;
    text-transform: capitalize;
    color: #393b3a;
}
.container2{
    padding: 0 15px;
    width: 1140px;
    height: 377px;
    text-align: center;
    margin-left: 410px;
}
.container2 .left{
    width: 540px;
    height: 264px;
    padding: 0 15px;
    background: #deecdf;
}
.container2 .left input{
    width: 507.2px;
    height: 20.987px;
    padding: 23.1px 15.4px;
    border: 1px solid #7ca17f;
    background: #deecdf;
    margin-bottom: 18.48px;
    font-size: 1.1em;
    color: #aac8ac;
    font-weight: 400;

}
.container2 textarea{
    width: 507.2px;
    height: 197.8px;
    padding: 23.1px 15.4px;
    border: 1px solid #7ca17f;
    background: #deecdf;
    font-size: 1.2em;
    color: #aac8ac;
    font-weight: 400;
}
input{

}


/* ---------------footer---------------- */
footer div{
    background-color: #deecdf;
    padding: 28px 0;
    text-align: center;
    
}


